<template>
    <div class="menu-box">
        <div class="item">

            <div class="icon-box" @click="onclickBusHandler"
                :style="menuSelection.bus ? 'background-color:rgb(245, 245, 245)' : 'background-color:rgb(250,250,250)'">
                <img :src="menuSelection.bus ? icons.selected.bus : icons.normal.bus" width="30" />
            </div>
            <span>公交车</span>
        </div>

        <div class="item">
            <div class="icon-box" @click="onclickSubwayHandler"
                :style="menuSelection.subway ? 'background-color:rgb(245, 245, 245)' : 'background-color:rgb(250,250,250)'">

                <img :src="menuSelection.subway ? icons.selected.subway : icons.normal.subway" width="20" />
            </div>
            <span>地铁</span>
        </div>
        <div class="item">
            <div class="icon-box" @click="onclickBikeParkHandler"
                :style="menuSelection.bikePark ? 'background-color:rgb(245, 245, 245)' : 'background-color:rgb(250,250,250)'">

                <img :src="menuSelection.bikePark ? icons.selected.bikePark : icons.normal.bikePark" width="30" />
            </div>
            <span>共享单车</span>
        </div>
    </div>
</template>

<script>
export default {
    emits: ['calledBikeParkChanged', 'calledSubwayChanged', 'calledBusChanged'],
    data() {
        return {
            menuSelection: {
                bus: false,
                subway: false,
                bikePark: true,
            },
            icons: {
                normal: {
                    bus: require('@/assets/img/icon/tool/icon_bus.png'),
                    subway: require('@/assets/img/icon/tool/icon_subway.png'),
                    bikePark: require('@/assets/img/icon/tool/icon_bike.png'),
                },
                selected: {
                    bus: require('@/assets/img/icon/tool/icon_bus_selected.png'),
                    subway: require('@/assets/img/icon/tool/icon_subway_selected.png'),
                    bikePark: require('@/assets/img/icon/tool/icon_bike_selected.png'),
                }
            }
        }
    },
    methods: {
        onclickBusHandler() {
            this.menuSelection.bus = !this.menuSelection.bus;
            this.$emit('calledBusChanged', this.menuSelection.bus);
        },
        onclickSubwayHandler() {
            this.menuSelection.subway = !this.menuSelection.subway;
            this.$emit('calledSubwayChanged', this.menuSelection.subway);
        },
        onclickBikeParkHandler() {
            this.menuSelection.bikePark = !this.menuSelection.bikePark;
            this.$emit('calledBikeParkChanged', this.menuSelection.bikePark);
        },
    }
}
</script>

<style scoped>
.menu-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 300px;
    height: 100px;
    border-radius: 10px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.item span {
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    color: rgb(131, 131, 131);
}

.item {}

.icon-box {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: 50px;
    width: 30px;
    height: 30px;
}
</style>